<template>
  <div class="detailbox border">
    <el-container style="background-color: rgb(250, 250, 251);z-index: 10;">
      
      <el-main>
        <el-table :data="profitList" :height="(store.state.dialog_body_height - 47)">
          <el-table-column label="收益日期" prop="settleDate">

          </el-table-column>
          <el-table-column label="95带宽(Mbps)" prop="bandwidth95">

          </el-table-column>
          <el-table-column label="收益" prop="currentUserAmount">
            <template #default="scope">
              {{ $utils.numDiv(scope.row.currentUserAmount, 100, 4) }}
            </template>
          </el-table-column>
        </el-table>
      
      </el-main>
      <el-footer>
        <div style="display: flex;align-items: center;height: 45px;">
          <div style="flex-grow: 1">

          </div>
          <!-- <el-pagination
            size="small"
            background
            layout="prev, pager, next"
            :total="50"
            class="mt-4"
          /> -->
          <el-pagination
            v-model:current-page="searchData.pageIndex"
            v-model:page-size="searchData.pageSize"
            :page-sizes="searchData.pageSizes"
            :background="true"
            size="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchData.totalItemCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-footer>

    </el-container>

  </div>
</template>

<script setup>
  import { ref, inject, defineEmits } from 'vue'
  import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  const store = useStore()
  const editData = ref({})
  const feildConfig = ref({
    isReadonly: false
  })

  // 定义emit方法
  const emit = defineEmits()

  const profitList = ref([])
  // 筛选条件
  const searchData = ref({
    pageIndex: 1,
    pageSizes: [30, 100, 200, 300, 400],
    pageSize: 30,
    totalItemCount: 0,
    keyWord: ''
  })

  function initData(obj) {
    editData.value = obj.data ? obj.data : {}
    feildConfig.value = obj.feildConfig ? obj.feildConfig : feildConfig.value
    searchData.value.deviceId = editData.value.id
    getProfitDetail()
  }


  function getProfitDetail () {
    $utils.post({
			url: '/Api/Profit/GetPagedList',
			params: searchData.value,
      showLoading: true,
			ok: (res) => {
        profitList.value = res.data
        searchData.value.totalItemCount = res.paged.totalCount
			}
		})
  }



  // *******************************修改分页*******************************
  // 改变每页条数方法
  function handleSizeChange(val) {
    searchData.value.pageSize = val
    getProfitDetail()
  }
  // 改变页数方法
  function handleCurrentChange(val) {
    searchData.value.pageIndex = val
    getProfitDetail()
  }

  function submitData() {
    console.log('提交数据')
    console.log(editData.value)
    emit('close-dialog', false)
  }

  defineExpose({
    initData,
    submitData
  })

</script>

<style scoped>
.el-container {
  height: 100%;
  border: none;
}
.el-header {
  background-color:#fafafb;
  border: 1px solid #DDE2E8;
  border-bottom:none;
  border-radius: 5px 5px 0 0;
  border: none;
}
.el-main {
  padding: 0;
  background-color:#DEDEDE;
  border: 1px solid #DDE2E8;
  border: none;
}
.el-footer {
  height:45px;
  /* border-radius: 0 0 5px 5px; */
  background-color:#fafafb;
  border:1px solid #DDE2E8;
  border-top:none;
  border: none;
}
/* 去除切换的动画效果 */
.diytablebox :deep(.el-table__body td.el-table__cell) {
  transition: none !important;
}
/* 去除table的hover效果 */
::v-deep .el-table__body tr.hover-row > td{
  background-color: inherit !important;
}
/deep/ .el-dialog__body {
  padding: 0 !important;
  /* padding: 0 15px 0 15px !important; */
}
/deep/ .el-dialog {
  margin: 30px auto 30px !important;
  overflow: hidden !important;
  /* min-width: 1150px; */
}
/deep/ .el-scrollbar__thumb {
  background-color: var(--table-bgc);
}

.saveBtn {
  background-color: #4999FA;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 3px;
  margin-right: 10px;
}
.saveBtn:hover {
  /* background-color: #7BB8FB; */
  opacity: 0.8;
  cursor: pointer;
}
.split_title {
  background-color: #EBEEF5;
  font-size: 16px;
  height: 30px;
  align-items: center;
  font-family: '楷体';
  font-weight: bold;
  display: flex;
  position: relative;
}
.split_title_content {
  flex-grow: 1;
  text-align: center;
}
.split_title_btn {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  align-items: center;
}
.shrinkbox_v2 {
  width: 70px;
}
  .diyinput :deep(.el-input__wrapper){
    border: 0 !important;
    outline: none;
    box-shadow: none;
    font-size: 12px;
  }
.diyselect :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
  /* pointer-events: none; */
}
.diyselect :deep(.el-input__wrapper:hover){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-input__wrapper:active){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-select__wrapper) {
  box-shadow: unset !important;
}
.diyinput :deep(.el-textarea__inner){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diydatepicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diyformitem {
  margin-bottom: 0;
}
.diydatapicker :deep(.el-date-editor){
  width: 100%;
}
.diydatapicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyinput :deep(.el-input-group__append){
  border: 0 !important;
  outline: none;
  background-color: unset;
  box-shadow: none;
  padding: 0 10px 0 5px;
  font-weight: bold;
  font-size: 16px;
}
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}
</style>